<template>
      <div class="register-container" style="max-width: 450px; margin: 50px auto;">
            <h2 style="text-align: center; margin-bottom: 20px;">用户注册</h2>

            <el-form :model="registerForm" :rules="rules" ref="registerRef" label-width="110px" status-icon
                  autocomplete="off">
                  <el-form-item label="用户类型" prop="role">
                        <el-select v-model="registerForm.role" placeholder="请选择用户类型" @change="onRoleChange">
                              <el-option label="学生" value="1" />
                              <el-option label="用工部门" value="2" />
                              <el-option label="部门审核" value="3" />
                        </el-select>
                  </el-form-item>

                  <el-form-item label="学校" prop="school" v-if="showStudentFields">
                        <el-input v-model="registerForm.school" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="是否贫困" prop="isPoor" v-if="showStudentFields">
                        <el-switch v-model="registerForm.isPoor" :active-value="1" :inactive-value="0" active-text="是"
                              inactive-text="否" />
                  </el-form-item>

                  <el-form-item label="贫困证明材料" prop="poorFile" v-if="showFileUpload">
                        <el-upload class="upload-demo" action="" :auto-upload="false" multiple list-type="picture"
                              v-model:file-list="fileList" :on-change="handleFileChange" :on-remove="handleFileRemove">
                              <el-button size="small" type="primary">点击上传</el-button>
                              <div slot="tip" class="el-upload__tip">仅支持jpg/png文件，且不超过2MB</div>
                        </el-upload>
                  </el-form-item>

                  <el-form-item label="用户名" prop="username">
                        <el-input v-model="registerForm.username" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="手机号" prop="tel">
                        <el-input v-model="registerForm.tel" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="邮箱" prop="email">
                        <el-input v-model="registerForm.email" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="密码" prop="password">
                        <el-input v-model="registerForm.password" type="password" autocomplete="off" />
                  </el-form-item>

                  <el-form-item label="确认密码" prop="confirmPassword">
                        <el-input v-model="registerForm.confirmPassword" type="password" autocomplete="off" />
                  </el-form-item>

                  <el-form-item>
                        <el-button type="primary" @click="submitForm" style="width: 100%;">注册</el-button>
                  </el-form-item>
            </el-form>
      </div>
</template>

<script setup>
import { useRegisterForm } from '@/hooks/useRegister'
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';

const {
      registerRef,
      registerForm,
      rules,
      fileList,
      showStudentFields,
      showFileUpload,
      onRoleChange,
      handleFileChange,
      handleFileRemove,
      submitForm,
      resetRegisterForm
} = useRegisterForm()

</script>

<style scoped>
.register-container {
      background: #fff;
      padding: 30px 25px;
      border-radius: 8px;
      box-shadow: 0 6px 15px rgb(0 0 0 / 0.1);
      max-height: 80vh;
      /* 设置最大高度为视口高度的 80% */
      overflow-y: auto;
      /* 允许垂直滚动 */
}
</style>
